<template>
<view>
  <view class="search flex flex-row">
    <span class="down flex" @tap="back"><image class="downImage back auto" src="https://www.zjjqf.cn/file/static/down.png"/></span>
    <view class="searchIpt flex flex-row a-item">
      <icon type="search" size="20"></icon>
      <input placeholder="输入搜索商品"  confirm-type="search" type="text" v-model="query.keyword" @input="searchGoodsList"/>
    </view>
  </view>
  <view class="sortList flex flex-row">
    <view @tap="setSort(item)" :class="{'red':item.value === currentSort}" class="sort  flex a-item j-content" v-for="item in sortList">{{ item.name }}</view>
  </view>
  <scroll-view @scrolltolower="getGoodsList" scroll-y :style="{height: height+'px'}">
    <view class="content flex flex-row wrap">
      <search-goods @selectGoods="selectGoods" :goods="item" v-for="item in goodsList"></search-goods>
    </view>
  </scroll-view>
  <uni-popup   maskBackgroundColor="rgba(69,64,68,.6)" ref="popup" type="bottom"  :animation="true">
    <select-goods :currentPromotionId.sync="currentPromotionId" @addGoods="addGoods"  @addstock="addstock" :type="type" :order='order' @subPromotionList="subPromotionList" :customer-id="customerId" :goods.sync="currentGoods" @close="close"></select-goods>
  </uni-popup>
  <!-- <view class="mask" @touchmove.stop.prevent="" @tap="close" @close="close" v-if="mask" /> -->
  <view class="shoppingCart flex" @tap="jumpCart">
    <image class="auto" src="http://121.41.75.32:8002/file/static/shoppingCart02.png"/>
    <view class="redDot">{{ type!=='3'?selectedGoodsList.length:addstocklist.length }}</view>
  </view>
</view>
</template>

<script>
import searchGoods from "../components/searchGoods";
import {basGoodsListForAdd} from "../../service/api/shopping";
import selectGoods from "../../components/selectGoods";
import {debounce, getScreen, setImage} from "../../service/auth";
export default {
  name: "index",
  components:{ searchGoods,selectGoods },
  data(){
    return{
      customerId:'',
      currentSort:'code',
      goodsList:[],
      currentPromotionId:-1,
      selectedGoodsList:[],
      addstocklist:[],
      currentGoods:{},
      height:0,
      mask: false,
      query:{
        page: 1,
        size: 20,
        goodsTypeIds:'',
        type: 'SALE',
        isIgnoreZeroUnGiftGoodsCount: 1,
        isAppletSale:1,
        scope:0,
        ignoreGoodsTagNames:'回瓶回箱,瓶盖',
        keyword:''
      },
      sortList:[
          {
            name:'综合',
            value:'code'
          },
          {
            name:'销量',
            value:'1'
          },
          {
            name:'价格',
            value:'2'
          }
      ],
      type:'',
      order:'',
      news:'',
    }
  },
  created() {
    const app = getApp()
    this.customerId = app.globalData.selectedPosition.id
    this.selectedGoodsList = app.globalData.shoppingCart||[]
    this.addstocklist = app.globalData.addstocklist||[]
    const {height} = getScreen()
    this.height = height
  },
  onLoad(option){
    this.type=option.type
    this.order=option.order
    this.news=option.news
    this.init()
    if(option.params){
      const params = JSON.parse(option.params)
      for (let key in params){
        this.$set(this.query,key,params[key])
      }
    }
    this.onGet()
  },
  methods:{
    back(){
      uni.navigateBack()
    },
    getGoodsList(){
      this.query.page ++
      this.onGet()
    },
    setSort(val){
      this.currentSort = val.value
    },
    searchGoodsList:debounce(function (){
      this.goodsList = []
      this.onGet()
    },500),
    init(){
      this.query.isSpecial = 0
      this.query.page = 1
      this.query.keyword = ''
      this.goodsList = []
    },
    onGet(){
      uni.showLoading({title:'加载中'})
      const data = {
        customerId: this.customerId,
        ...this.query
      }
      basGoodsListForAdd(data).catch(err=>{
        uni.hideLoading()
        err.content.forEach(item=>{
          item.url = setImage(item.url)
        })
        if (err.content.length < this.query.size)this.end = true
        this.goodsList = [...this.goodsList,...err.content]
      })
    },
    subPromotionList(list){
      this.selectedGoodsList.push(...list)
    },
    selectGoods(e){
      this.currentPromotionId = -1
      this.currentGoods = {...e,boxNum:0,mainNum:0}
      this.$refs.popup.open()
      this.mask = true
    },
    addGoods(val){
      this.selectedGoodsList.push(val)
      this.close()
    },
    addstock(val){
      console.log(this.addstocklist);
      this.addstocklist.push(val)
      const app = getApp()
      this.$set(app.globalData,'addstocklist',this.addstocklist||[])
      this.close()
    },
    close(){
      this.$refs.popup.close()
      this.mask = false
    },
    jumpCart(){
      if (this.type!=='3') {
        uni.navigateTo({url:`/pageShopping/shoppingCart/index?type=${this.type}&&order=${this.order}&&news=${this.news}`})
      }else{
        uni.navigateTo({url:`/pageShopping/stockCart/index?type=${this.type}&&order=${this.order}&&news=${this.news}`})
      }
      
    }
  }
}
</script>

<style lang="scss" scoped>
.search{
  background: red;
  height: 100rpx;
  .searchIpt{
    background-color: #ffffff;
    margin-top: 10rpx;
    height: 80rpx;
    width: 70%;
    border-radius: 80rpx;
    padding-left: 30rpx;
    input{
      height: 100%;
    }
  }
  .back{
    transform: rotate(90deg);
    width: 80rpx;
    height: 80rpx;
    margin-right: 50rpx;

    .downImage{
      width: 50rpx;
      height: 50rpx;
    }
  }
}
.sortList{
  .sort{
    width: 250rpx;
    height: 100rpx;
    font-size: 35rpx;

  }
}
.content{
  background: #F5F5F5;
  height: 100%;
}

</style>
